<template>
  <view class="pages" :style="{ paddingBottom: safeAreaBottom + 85 + 'px' }">
    <view class="profile_title" v-if="babyList?.length == 1">
      <view class="profile_title_box">
        <image
          :src="babyList[0]?.avatar || 'https://ossresource.miyingbl.com/user_avatar/0.png'"
          mode="scaleToFill"
        />
        <view class="patient">
          <view class="patient_name">{{ babyList[0]?.baby_name }}</view>
          <view class="patient_info">
            <text style="margin-right: 14rpx">{{ babyList[0]?.age_text }}</text>
            <!-- <view class="name_leng"></view> -->
            <!-- <text style="margin-left: 14rpx">{{ detailsInfo?.tag }}</text> -->
          </view>
        </view>
      </view>
      <view class="real_identifier" v-if="babyList?.userInfo?.is_certified != 0">已实名</view>
    </view>
    <view v-else style="width: 750rpx; margin-top: 20rpx; overflow-y: scroll">
      <view class="baby_list_box" :style="{ width: 340 * babyList?.length + 22 + 'rpx' }">
        <view
          class="baby_list"
          v-for="(item, index) in babyList"
          :key="index"
          @click="babyListChage(item, index)"
          :style="{ backgroundColor: currctIndex == index ? '#00C1B9' : '' }"
        >
          <image
            :src="item?.avatar || 'https://ossresource.miyingbl.com/user_avatar/0.png'"
            mode="scaleToFill"
          />
          <view>
            <view style="margin-bottom:10rpx"
            :style="{color: currctIndex == index ? '#fff' : '#202020'}">{{ item?.baby_name }}</view>
            <view :style="{color: currctIndex == index ? '#fff' : '#202020'}">{{ item?.age_text }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 基本信息 -->
    <view class="basic_info_box">
      <view class="info_title">基本信息</view>
      <view class="info_list">
        <view style="color: #5c5c5c">生日</view>
        <view style="color: #202020">{{ babyList[currctIndex]?.birthday }}</view>
      </view>
      <view class="info_list">
        <view style="color: #5c5c5c">性别</view>
        <view style="color: #202020">{{ babyList[currctIndex]?.sex_name }}</view>
      </view>
      <view class="info_list">
        <view style="color: #5c5c5c">出生孕周</view>
        <view style="color: #202020">{{
          babyList[currctIndex]?.beborn_week != 0
            ? babyList[currctIndex]?.beborn_week + '周'
            : '未设置'
        }}</view>
      </view>
      <view class="info_list">
        <view style="color: #5c5c5c">分娩方式</view>
        <view style="color: #202020" v-if="babyList[currctIndex]?.delivery_method == 0"
          >未选择</view
        >
        <view style="color: #202020" v-if="babyList[currctIndex]?.delivery_method == 1">顺产</view>
        <view style="color: #202020" v-if="babyList[currctIndex]?.delivery_method == 2"
          >宫刨产</view
        >
      </view>
      <view class="info_list">
        <view style="color: #5c5c5c">胎龄</view>
        <view style="color: #202020">{{
          babyList[currctIndex]?.gestational_age != 0
            ? babyList[currctIndex]?.gestational_age + '周'
            : '未设置'
        }}</view>
      </view>
    </view>
    <view v-if="showList == 0">
      <!-- 日常记录 -->
      <view class="dailyrecord_box">
        <view class="record_title">日常记录</view>
        <view v-if="babyList[currctIndex]?.daily_type == 1" class="record_list" v-for="(item, index) in dailyrecordList.slice(0,3)" :key="index">
          <image :src="item?.img || ''" mode="scaleToFill" />
          <view class="record_item" :style="{ border: index == 2 ? 'none' : '' }" @click="toWeightRecord(item)">
            <view class="record_product">{{ item?.name }}</view>
            <up-icon name="arrow-right" color="#aaa" size="16" :bold="true"></up-icon>
          </view>
        </view>
        <view v-if="babyList[currctIndex]?.daily_type == 2" class="record_list" v-for="(item, index) in dailyrecordList.slice(3, 7)" :key="index">
          <image :src="item?.img || ''" mode="scaleToFill" />
          <view class="record_item" :style="{ border: index == 3 ? 'none' : '' }" @click="toWeightRecord(item)">
            <view class="record_product">{{ item?.name }}</view>
            <up-icon name="arrow-right" color="#aaa" size="16" :bold="true"></up-icon>
          </view>
        </view>
        <view
          v-if="babyList[currctIndex]?.daily_type == 3"
          class="record_list"
          v-for="(item, index) in dailyrecordList"
          :key="index"
        >
          <image :src="item?.img || ''" mode="scaleToFill" />
          <view class="record_item" :style="{ border: index == 6 ? 'none' : '' }" @click="toWeightRecord(item)">
            <view class="record_product">{{ item?.name }}</view>
            <up-icon name="arrow-right" color="#aaa" size="16" :bold="true"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom_box">
      <view
        class="interrogation_btn"
        @click="toInterrogation"
        :class="{ interrogation_btn_active: isInterrogation }"
      >
        发起问诊
      </view>
      <view :style="{ height: safeAreaBottom }"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { navigateTo } from '@/utils'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getPatienDetails, getAntenatalData } from '@/api/patients/index'
const isBorder = ref(true)
const showList = ref(0)
//多个孩子
const babyList = ref([])
//详情信息
const detailsInfo = ref({})
//产检
const antenatalInfo = ref({})
const dailyrecordList = ref([
  {
    img: '/static/pediatrics/grow.png',
    path: '/pediatrics/growthRecord/index',
    name: '生长记录',
  },
  {
    img: '/static/pediatrics/feed.png',
    path: '/pediatrics/feedingRecord/index',
    name: '喂养记录',
  },
  {
    img: '/static/pediatrics/vaccine.png',
    path: '/pediatrics/vaccination/records',
    name: '疫苗记录',
  },
  {
    img: '/static/patient/weight.png',
    path: '/pediatrics/weightManagement/record',
    name: '体重记录',
  },
  {
    img: '/static/patient/diet.png',
    path: '/pediatrics/weightManagement/dietaryRecords/addRecord',
    name: '饮食记录',
  },
  {
    img: '/static/patient/exercise.png',
    path: '/pediatrics/weightManagement/dietaryRecords/addRecord',
    name: '运动记录',
  },
  {
    img: '/static/patient/sleep.png',
    path: '/pediatrics/weightManagement/sleepRecords/index',
    name: '睡眠记录',
  },
])
const healthInfoList = ref([
  {
    title: '过敏史',
    name: '有',
  },
  {
    title: '过往病史',
    name: '有',
  },
  {
    title: '肝功能',
    name: '异常',
  },
  {
    title: '肾功能',
    name: '异常',
  },
])
//底部安全栏高度
const safeAreaBottom = ref(0)
onLoad((o) => {
  console.log(o)
  userId.value = o.userId
  uni.getSystemInfo({
    success: (e) => {
      safeAreaBottom.value = e.safeAreaInsets.bottom
    },
  })

})
onShow(()=>{
  getPatienDetailsF()
  getAntenatalDataFn()
})
//获取详情
const userId = ref('')
const isInterrogation = ref(0)
async function getPatienDetailsF() {
  const res = await getPatienDetails({ uid: userId.value, type: 3 })
  if (res?.code == 200) {
    babyList.value = res?.data[0]?.data
    childId.value = babyList?.value[0]?.id
    isInterrogation.value = res?.data[0]?.is_initiate
    detailsInfo.value = res?.data[0]?.userInfo
  }
}
//孩子列表点击
const currctIndex = ref(0)
const babyListChage = (i, e) => {
  currctIndex.value = e
  childId.value = i?.id
}

//获取展示产检记录
async function getAntenatalDataFn() {
  const res = await getAntenatalData({ uid: userId.value })
  if (res?.code == 200) {
    if (res?.data?.cj_report && res?.data?.cj_report?.length > 3) {
      res.data.cj_report = res.data.cj_report.splice(0, 3)
    }
    antenatalInfo.value = res.data
  }
}
//去体重
const childId = ref(0)
function toWeightRecord(e) {
  if(e.name == '饮食记录'){
    navigateTo(`${e?.path}?childId=${childId.value}&userId=${userId.value}&isshow=food`)
  }else if(e.name == '运动记录'){
    navigateTo(`${e?.path}?childId=${childId.value}&userId=${userId.value}&isshow=sport`)
  }else{
    navigateTo(`${e?.path}?childId=${childId.value}&userId=${userId.value}`)
  }
}
//
function toRecorTest() {
  navigateTo(`/pregnancys/index/time-table/record-test?uid=${userId.value}`)
}
function collapseOpen() {
  isBorder.value = false
}
function closeCollapse() {
  // isBorder.value = true
}
//问诊
function toInterrogation() {
  if (isInterrogation.value) {
    navigateTo(
      `/pregnancys/index/doctor-chat?uid=${detailsInfo?.value?.uid}&avatar=${detailsInfo?.value?.avatar}&name=${detailsInfo?.value?.nickname}&chat_type=3&childId=${babyList?.value[0]?.id}`,
    )
  } else {
    return false
  }
}
</script>
<style>
page {
  background: #f5f6f8;
}
</style>
<style lang="scss" scoped>
.pages {
  width: 100%;
  font-family: PingFangSC, PingFang SC;
  display: flex;
  flex-direction: column;
  align-items: center;
  .profile_title {
    width: 702rpx;
    height: 140rpx;
    background: #ffffff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    margin-top: 20rpx;
    .real_identifier {
      width: 118rpx;
      height: 48rpx;
      background: #ffffff;
      border-radius: 24rpx 0rpx 0rpx 24rpx;
      border-top: 1rpx solid #00c1b9;
      border-bottom: 1rpx solid #00c1b9;
      border-left: 1rpx solid #00c1b9;
      font-size: 24rpx;
      color: #00c1b9;
      text-align: center;
      line-height: 48rpx;
    }
    .profile_title_box {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
      }
      .patient {
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 20rpx;
        .patient_name {
          font-size: 30rpx;
          color: #202020;
          font-weight: 600;
        }
        .patient_info {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #5c5c5c;
          .name_leng {
            width: 1rpx;
            height: 24rpx;
            background: #5c5c5c;
          }
        }
      }
    }
  }
  .baby_list_box {
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    .baby_list {
      display: flex;
      align-items: center;
      width: 340rpx;
      height: 140rpx;
      padding: 20rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-right: 22rpx;
      image {
        width: 100rpx;
        height: 100rpx;
        margin-right: 20rpx;
      }
    }
  }
  .basic_info_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin: 20rpx 0;
    .info_title {
      font-size: 30rpx;
      color: #202020;
      font-weight: 600;
      margin-bottom: 10rpx;
    }
    .info_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      border-bottom: 1rpx solid #e8e8e8;
      font-size: 28rpx;
      &:last-child {
        border-bottom: none;
        height: 50rpx;
        margin-top: 20rpx;
      }
    }
  }
  //产检记录
  .record_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    .record_title_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .record_title {
        font-size: 30rpx;
        color: #202020;
        font-weight: 600;
      }
      .look_details {
        width: 144rpx;
        height: 48rpx;
        background: #00c1b9;
        border-radius: 24rpx;
        font-size: 26rpx;
        color: #ffffff;
        text-align: center;
        line-height: 48rpx;
      }
    }
    .cycle_box {
      margin-top: 20rpx;
      .cycle {
        font-weight: 600;
        font-size: 28rpx;
        color: #00c1b9;
      }
      .product {
        display: flex;
        align-items: center;
        margin: 20rpx 0;
        font-size: 26rpx;
        color: #5c5c5c;
        .product_list {
          width: 500rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          text {
            margin-right: 10rpx;
          }
        }
      }
      .date_box {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #5c5c5c;
      }
    }
    .inspect_table {
      display: flex;
      align-items: center;
      margin-top: 6rpx;
      image {
        width: 180rpx;
        height: 180rpx;
        margin-right: 10rpx;
        border-radius: 10rpx;
      }
    }
  }
  //日常记录
  .dailyrecord_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx 0 20rpx;
    .record_title {
      font-weight: 600;
      font-size: 30rpx;
      color: #202020;
    }
    .record_list {
      display: flex;
      align-items: center;
      image {
        width: 29rpx;
        height: 30rpx;
      }
      .record_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 612rpx;
        margin-left: 26rpx;
        height: 100rpx;
        border-bottom: 1rpx solid #e8e8e8;
        .record_product {
          font-size: 28rpx;
          color: #202020;
        }
      }

    }
  }
  //健康信息
  .Health_info {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin-top: 20rpx;
    .Health_info_title {
      font-weight: 600;
      font-size: 30rpx;
      color: #202020;
    }
    .inspect_type {
      font-size: 28rpx;
      color: #5c5c5c;
    }
    .inspect_result {
      font-size: 28rpx;
      color: #202020;
    }
    .inspect_content {
      background: #f5f6f8;
      border-radius: 10rpx;
      padding: 20rpx;
    }
  }
  .bottom_box {
    width: 750rpx;
    // height: 168rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    .interrogation_btn {
      margin: 20rpx auto;
      width: 702rpx;
      height: 88rpx;
      background: #d6e2e1;
      border-radius: 48rpx;
      text-align: center;
      line-height: 88rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
    .interrogation_btn_active {
      background: #00c1b9;
    }
  }
}
</style>
